﻿@model StonePonyMVC.Models.IndexModel
@{
    ViewBag.Title = "Stone Pony";
}

@Html.HiddenFor(m => m.EnquiredItemsCount, new { Value = Model.EnquiredItemsCount.ToString() })
@Html.HiddenFor(m => m.SessionId, new { Value = Model.SessionId.ToString() })

<div id="page">
<div id="container">
    <table border="0" style="width: 100%; ">
        <colgroup>
            <col width="350px" />
            <col width="350px" />
            <col width="250px" />
            <col width="250px" />
        </colgroup>
        <tr style="vertical-align: top;">
            <td id="thumbs" class="navigation" rowspan="3">
                <ul class="thumbs noscript" style="padding-top: 15px;">
@{
    foreach (StonePonyMVC.StonePony.Classes.ImageDescriptor descriptor in Model.ImgDescriptors)
    {
        <li>
            <a class="thumb" name="@descriptor.ItemCode" href="@descriptor.LargeImageUrl" title="@descriptor.ItemTitle" 
                             data-price="@descriptor.Price">
	            <img src="@descriptor.SmallImageUrl" alt="@descriptor.ItemTitle" width="64" height="48" />
            </a>
            <div class="caption">
                <table border="0">
                    <colgroup>
                        <col width="30%"/>
                        <col width="70%" style="text-align:left; padding-left: 2px;"/>
                    </colgroup>
                    <tr>
                        <td style="text-align:right; padding-right: 2px;">Item code:</td>
                        <td>@descriptor.ItemStockCode</td>
                    </tr>
                    <tr>
                        <td style="text-align:right; padding-right: 2px;">Dimensions:</td>
                        <td>@descriptor.ItemNotes</td>
                    </tr>
                    <tr>
                        <td style="text-align:right; padding-right: 2px;">Status:</td>
                        <td>@descriptor.Status</td>
                    </tr>
                </table>


@*	            <div class="image-title">@descriptor.ItemTitle</div>
	            <div class="image-desc">@descriptor.ItemShortDescription</div>
	            <div class="image-notes">@descriptor.ItemNotes</div>
*@
            </div>
        </li>
    }
}
                </ul>
            </td>
            <td id="controls" class="controls" colspan="2" style=" padding: 5px 50px 0 50px; line-height: 25px;" />

            <td class="navigation" rowspan="3">
                <div class="bordered-slideshow-container" id="draggableArea">
                    <div id="logindisplay" class="TopSection">
                        <span style="vertical-align: top;">My Enquiry Cart</span>
                        <a href="#" class="showImageUrl" title="Show normal size image." target="_blank" style="text-decoration: none;" >
                            <img src="Images/M.png" style="border: none; vertical-align: middle;" alt="Angry face" width="24px" height="24px" />
                        </a>
                        <span class="enquiryCounter" style=" vertical-align: middle;"></span>
                        <br />
                    </div>
                    <div id="myBasket" class="MiddleSection">
                        <div class="BottomSection MiddleTrashSection">
                            <img src="Images/24-Empty Trash.png" class="LeftSideImage" alt="Trash" />
                            <span>Drag an image into this area for deleting item from the enquiry.</span>
                        </div>
@{
    if (Model.EnquiredItemsCount > 0)
    {
        foreach (StonePonyMVC.StonePony.Classes.ImageDescriptor descriptor in Model.EnquiredItems)
        {
              <img src="@descriptor.SmallImageUrl" alt="@descriptor.ItemTitle" data-imageid = "@descriptor.ItemCode"
                   class="EnquiredImage ui-draggable" title="Drag the image to trash for deleting @descriptor.ItemTitle" />
        }
    }
}
	                </div>
                    <div id="hiddenBottomBlock" class="BottomSection">
                        <span class="hiddenBlock" >
                            <input type="button" value="Send" onclick="return SendEnquiry(this);" style="margin-right: 20px;" title="Send Enquiry" />
                            <input type="button" value="Clear" onclick="return ClearEnquiry(this);" title="Clear enquiry(ies)." />
                        </span>
                    </div>
                </div>
            </td>

        </tr>
        <tr style="height: 455px; vertical-align: top;">
            <td colspan="2">
	            <div class="slideshow-container">
		            <div id="loading" class="loader"></div>
		            <div id="slideshow" class="slideshow"></div>
	            </div>
            </td>
        </tr>

        <tr style="vertical-align: top;">
            <td><div id="caption" class="caption-container"></div></td>
            <td style="padding-right: 65px;">
                <div id="select-button">
                    <h3 id="priceLabel" class="priceLabel"></h3>
                    <input type="button" value="Enquire about this item" onclick="return EnquiryThisItem(this);" />
                    <input type="button" id="ClearCookieBtn" value="Clear cookie" onclick="return ClearCookie(this);" 
                           style="display: none; margin-top: 10px;" />
                </div>            
            </td>
        </tr>
        
    </table>
    
</div>
</div>

<!-- Dialog box -->
<div id="dialog-overlay"></div>
<div id="dialog-box">
    <div class="dialog-content">
        <div id="dialog-message">
            <form method="post" action="mailto:youremail@email.com">
                <table border="0" width="100%" id="tableLayout" style="margin-bottom: 20px; float: right;">
                    <colgroup>
                        <col width="30%" />
                        <col width="70%" />
                    </colgroup>
                    <thead>
                        <tr>
                            <td colspan="2"><h3 style="padding: 0; margin: 0;">Enquiry Form</h3></td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr><td colspan="2">&nbsp</td></tr>
                        <tr>
                            <th class="mandatory">First Name <span style="font-weight: normal; font-family: Arial, Sans-Serif;">*</span></th>
                            <td><input name="FirstName" type="text" maxlength="60" /></td>
                        </tr>
                        <tr>
                            <th class="mandatory">Last Name <span style=" font-weight: normal; font-family: Arial, Sans-Serif;">*</span></th>
                            <td><input name="LastName" type="text" maxlength="60" /></td>
                        </tr>
                        <tr>
                            <th>Phone</th>
                            <td><input name="Phone" type="text" maxlength="60" /></td>
                        </tr>
                        <tr>
                            <th class="mandatory email" style="padding-bottom: 15px;">Email <span style=" font-weight: normal; font-family: Arial, Sans-Serif;">*</span></th>
                            <td style="padding-bottom: 15px;"><input name="Email" type="text" maxlength="60" /></td>
                        </tr>
                        <tr>
                            <td colspan="2" class="roundBorder" style=" text-align: left; padding-left: 10px;">
                                <input type="checkbox" id="Accept" name="Accept" value="1" style=" vertical-align: middle;" />
                                <label for="Accept" style=" vertical-align: middle;">Subscribe to Stone Pony's email list</label>
                                <br />
                                <input type="checkbox" id="Remember" name="Remember" value="0" style=" vertical-align: middle;" />
                                <label for="Remember" style=" vertical-align: middle;">Remember me.</label>
                            </td>
                        </tr>
                        <tr><td colspan="2">&nbsp</td></tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td align="left"><a href="#" class="button_OK" 
                                onclick="return sendEnquiry1(this);">OK</a></td>
                            <td align="right"><a href="#" class="button_Cancel">Cancel</a></td>
                        </tr>
                    </tfoot>
                </table>
                <div class="ErrorMessage">
                </div>
            </form>

        </div>
    </div>
</div>

<script type="text/javascript">
<!--
    //http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/
    jQuery(document).ready(function ($) {
        $('div#myBasket div.MiddleTrashSection').droppable({
            drop: handleDropEvent
        });
    });

    function handleDropEvent(event, ui) {
        var draggable = ui.draggable;
        var itemName = draggable.attr('alt');
        var itemCode = draggable.attr('data-imageid');

        var manager = $find('StonePonyAppManager');
        var s = String.format("Do you want to delete {0} from enquiry?", itemName);
        if (confirm(s))
            manager.deleteEnquiry(itemCode);
    }

    function EnquiryThisItem(inquiryButton) {
        var manager = $find('StonePonyAppManager');
        var imageFooter = $(inquiryButton).closest('div#image-footer');
        manager.enquirySelectedItem(imageFooter);
    }
    function sendEnquiry1(okButton) {
        var manager = $find('StonePonyAppManager');
        var table1 = $(okButton).closest('table#tableLayout');
        var isValid = manager.validateDialog(table1);
        if (isValid) {
            manager.enquiryItem(table1);

        }
        return isValid;
    }
    function ClearCookie(currentButton) {
        var manager = $find('StonePonyAppManager');
        $.cookie(manager.CokieId, null);
        $(currentButton).hide();
    }

    function SendEnquiry(inquiryButton) {
        var manager = $find('StonePonyAppManager');
        manager.sendEnquiry();
    }
    function ClearEnquiry(inquiryButton) {
        var manager = $find('StonePonyAppManager');
        var resp = confirm(manager.get_ConfirmationMessage());
        if (resp != true)
            return false;

        manager.clearEnquiries();
    }
//-->
</script>
